<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" title="查看商户入网" @closed="createClose"
      :visible.sync="open" size="65%" append-to-body>
      <el-form v-loading="loading" ref="form" :model="form" disabled label-width="110px" class="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品" prop="productCode">
              <el-select @change="$forceUpdate()" filterable v-model="form.productCode" placeholder="请选择产品" clearable
                style="width: 240px">
                <el-option label="蓝海-S0" value="ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB" />
                <el-option label="蓝海-D1" value="ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB_D1" />
                <el-option label="苏商-S0" value="ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_SUNINGBANK" />
                <el-option label="厦门-S0" value="ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_XIBX" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺账户" prop="shopId">
              <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户" clearable
                style="width: 240px">
                <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费率" prop="feeRate">
              <el-input-number :precision="2" v-model.number="form.feeRate" placeholder="请输入费率" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="请求单号" prop="requestId">
          <el-input v-model="form.requestId" :maxlength="80" placeholder="请输入请求单号" />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="二级商户号" prop="subMerchantNo">
              <el-input v-model="form.subMerchantNo" :maxlength="80" placeholder="请输入二级商户号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="productCode">
              <el-select v-model="form.status" placeholder="请选择状态" clearable>
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="form.status === 3">
            <el-form-item label="驳回原因" prop="fail">
              <el-input v-model="form.fail" placeholder="请输入驳回原因" />

            </el-form-item>
          </el-col>

        </el-row>

        <el-divider content-position="left">资质信息</el-divider>

        <el-row>
          <el-col :span="8">
            <el-form-item label="商户类型" prop="signType">
              <el-select v-model="form.signType" placeholder="请选择商户类型" clearable style="width: 240px">
                <el-option label="企业" value="ENTERPRISE" />
                <el-option label="个体户" value="INDIVIDUAL" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类型" prop="businessRole">
              <el-select v-model="form.businessRole" placeholder="请选择业务类型" clearable style="width: 240px">
                <el-option label="本地生活" value="SETTLED_MERCHANT" />
                <el-option label="线上电商" value="ORDINARY_MERCHANT" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="营业执照" prop="licenceImg">
              <YeePayFileUpload keys="licenceUrl" :path="form.licenceUrl" :file-size="4" :limit="1"
                v-model="form.licenceImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户许可证" prop="openAccountLicenceImg">
              <YeePayFileUpload keys="openAccountLicenceUrl" :file-size="4" :path="form.openAccountLicenceUrl"
                :limit="1" v-model="form.openAccountLicenceImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="200" label="手持营业执照在经营场所" prop="handLicenceImg">
              <YeePayFileUpload keys="handLicenceUrl" :file-size="4" :path="form.handLicenceUrl" :limit="1"
                v-model="form.handLicenceImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="公司全称" prop="signName">
              <name-input v-model="form.signName" :maxlength="80" placeholder="请输入营业执照全称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺名称" prop="shortName">
              <name-input v-model="form.shortName" :maxlength="20" placeholder="请输入店铺名称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="社会统一信用代码" prop="licenceNo" label-width="140px">
              <el-input v-model="form.licenceNo" :maxlength="20" placeholder="请输入社会统一信用代码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="业务分类" prop="primaryIndustryCategory">
              <el-cascader v-model="industry" clearable :options="industryList"
                :props="{ label: 'name', value: 'code' }" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="行业相关资质" prop="industryQualificationImg">
          <YeePayFileUpload :fileType="['zip']" type="file" keys="industryQualificationUrl" :file-size="4"
            :path="form.industryQualificationUrl" :limit="1" v-model="form.industryQualificationImg"></YeePayFileUpload>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经营地址" prop="province">
              <el-cascader v-model="province" clearable :options="cityList" :props="{ label: 'name', value: 'code' }"
                style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="经营详情地址" label-width="130px" prop="address">
              <el-input v-model="form.address" :maxlength="100" placeholder="请输入经营详细地址	" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">银行信息</el-divider>

        <el-form-item label="结算类型" prop="bankAccountType">
          <el-select v-model="form.bankAccountType" placeholder="请选择结算类型" clearable style="width: 100%">
            <el-option label="对公" value="ENTERPRISE_ACCOUNT" />
            <el-option label="对私" value="DEBIT_CARD" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="银行名称" prop="bankCode">
              <el-select filterable remote v-model="form.bankCode" clearable placeholder="请输入银行名称"
                :loading="bankNameLoading" style="width: 100%;">
                <el-option v-for="item in bankList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="银行账户号码" prop="bankCardNo">
              <el-input v-model="form.bankCardNo" placeholder="请输入银行账户号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">法人信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证件正面（人像面）" prop="legalLicenceFrontImg">
              <YeePayFileUpload keys="legalLicenceFrontUrl" :file-size="5" :path="form.legalLicenceFrontUrl" :limit="1"
                v-model="form.legalLicenceFrontImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件反面（国徽面）" prop="legalLicenceBackImg">
              <YeePayFileUpload keys="legalLicenceBackUrl" :file-size="5" :path="form.legalLicenceBackUrl" :limit="1"
                v-model="form.legalLicenceBackImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="legalName">
              <el-input v-model="form.legalName" placeholder="请输入法人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" />
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人手机号" prop="contactMobile">
              <el-input v-model="form.contactMobile" placeholder="请输入联系人手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="法人证件号码" prop="legalLicenceNo">
          <el-input v-model="form.legalLicenceNo" placeholder="请输入法人证件号码" />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="付款业务协议" prop="agreementPhotoImg">
              <YeePayFileUpload type="zip" keys="agreementPhotoUrl" :path="form.agreementPhotoUrl" :fileType="['zip']"
                :file-size="4" :limit="1" v-model="form.agreementPhotoImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款业务系统" prop="systemScreenshotImg">
              <YeePayFileUpload type="zip" keys="systemScreenshotUrl" :file-size="4" :fileType="['zip']"
                :path="form.systemScreenshotUrl" :limit="1" v-model="form.systemScreenshotImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer-operation">
        <el-button @click="initialization(); open = false">返回</el-button>
        <el-button v-if="form.status === 4" type="success" @click="href">协议地址</el-button>
        <el-button :loading="loading" v-hasPermi="['ecs:yeePay:queryYeePayIncoming']" type="primary"
          @click="query">查询</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import { getYeePay, queryYeePayIncoming } from '@/api/ecs/yeePay'
import { listShop } from '@/api/ecs/shop'
import { listYeePayIndustry } from '@/api/ecs/yeePayIndustry'
import { listYeePayCity } from '@/api/ecs/yeePayCity'

export default {
  name: "YeePayOperate",
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: {}
    }
  },
  components: {
    YeePayFileUpload
  },
  data() {
    return {
      open: false,
      form: {},
      loading: false,
      isRefresh: false,
      shopList: [],
      cityList: [],
      province: [],
      industry: [],
      bankList: [],
      industryList: [],
      bankNameLoading: false,
      statusOptions: [
        { value: 1, label: "待提交" },
        { value: 2, label: "审核中" },
        { value: 3, label: "审核驳回" },
        { value: 4, label: "协议待签署" },
        { value: 5, label: "申请完成" },
      ],
    }
  },
  created() {
    listShop({ page: 1, pageSize: 1000000 }).then(res => {
      this.shopList = res.rows
    })
    listYeePayIndustry().then(response => {
      this.industryList = this.handleTree(response.data, "code", "parentCode");
    })
    listYeePayCity().then(response => {
      this.cityList = this.handleTree(response.data, "code", "parentCode");
    })
  },
  methods: {
    initialization() {
      this.province = []
      this.industry = []
      this.form = {
        id: null,
        signType: null,
        licenceNo: null,
        licenceUrl: null,
        licenceImg: null,
        signName: null,
        shortName: null,
        openAccountLicenceUrl: null,
        openAccountLicenceImg: null,
        handLicenceUrl: null,
        handLicenceImg: null,
        legalName: null,
        legalLicenceType: null,
        legalLicenceNo: null,
        legalLicenceFrontUrl: null,
        legalLicenceFrontImg: null,
        legalLicenceBackUrl: null,
        legalLicenceBackImg: null,
        contactName: null,
        contactLicenceNo: null,
        contactMobile: null,
        contactEmail: null,
        servicePhone: null,
        adminMobile: null,
        adminEmail: null,
        bankAccountType: null,
        bankCardNo: null,
        bankCode: null,
        province: null,
        city: null,
        district: null,
        address: null,
        notifyUrl: null,
        feeRate: 0,
        percentRate: null,
        createTime: null,
        updateTime: null,
        status: null,
        fail: null,
        agreementSignUrl: null,
        productCode: "ENTERPRISE_RECHARGE_STANDARD_BANKACCOUNTPAY_WHLHB",
        rateType: null,
        primaryIndustryCategory: null,
        secondaryIndustryCategory: null,
        industryQualificationUrl: null,
        industryQualificationImg: null,
        paymentScene: null,
        agreementPhotoUrl: null,
        agreementPhotoImg: null,
        systemScreenshotUrl: null,
        systemScreenshotImg: null
      };
      this.resetForm("form");
    },
    query() {
      this.loading = true
      queryYeePayIncoming({ id: this.form.id, requestId: this.form.requestId, subMerchantNo: this.form.subMerchantNo }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.getDetail(this.form.id)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    createClose() {
      this.initialization()
      this.open = false
      this.$emit("close", false, this.isRefresh)
    },
    href() {
      if (this.form.agreementSignUrl) {
        window.open(this.form.agreementSignUrl)
      } else {
        this.$modal.msgError("暂无协议地址，请联系运行商");
      }
    },
    getDetail(val) {
      getYeePay(val).then(response => {
        this.industry = [response.data.primaryIndustryCategory, response.data.secondaryIndustryCategory]
        this.province = [response.data.province, response.data.city, response.data.district]
        this.form = response.data
      });
    }
  },
  watch: {
    opens: {
      handler(val) {
        this.open = val

      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.getDetail(val)
        } else {
          this.initialization()
        }
      },
      immediate: true,
    }
  }
}
</script>
<style scoped lang="scss">
.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
